<template>
  <el-main>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="合同名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="所属分类">
        <el-select v-model="form.categoryId1" placeholder="一级分类" @change="changeCate1">
          <el-option :label="item.name" :value="item.id" v-for="item in category1List"></el-option>
        </el-select>
        <el-select v-model="form.categoryId2" placeholder="二级分类" @change="changeCate2">
          <el-option :label="item.name" :value="item.id" v-for="item in category2List"></el-option>
        </el-select>
        <el-select v-model="form.categoryId" placeholder="三级分类">
          <el-option :label="item.name" :value="item.id" v-for="item in category3List"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="合同时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="合同状态">
        <el-switch v-model="form.status"></el-switch>
      </el-form-item>
      <el-form-item label="合同类型">
        <el-checkbox-group v-model="form.typeIdList">
          <el-checkbox :label="item.id" v-for="item in typeList" name="type">{{ item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="合同金额">
        <el-input v-model="form.total"></el-input>
      </el-form-item>
      <video :src="form.fileUrl" autoplay height="100px;" controls v-if="form.fileUrl"></video>
      <el-form-item label="合同附件">
        <uploader :options="options" class="uploader-example" @file-success="onSuccess">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <p>Drop files here to upload or</p>
            <uploader-btn>select files</uploader-btn>
            <uploader-btn :attrs="attrs">select images</uploader-btn>
            <uploader-btn :directory="true">select folder</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script>

export default {
  name: "HeTong",
  data() {
    return {
      options: {
        target: this.axios.defaults.baseURL + 'file/upload',
        testChunks: false,
        query: {
          hetongId: null,
          name: null
        }
      },
      attrs: {
        accept: 'image/*'
      },
      form:{
        typeIdList:[],
        fileUrl: null
      },
      typeList: [],
      category1List:[],
      category2List:[],
      category3List:[]
    }
  },
  methods:{
    onSuccess: function (p1, p2, p3, p4) {
      console.log("p1", p1, "p2", p2, "res", p3);
      debugger
      let resObj = JSON.parse(p3);
      console.log(resObj)
      this.form.fileUrl = resObj.data.fileUrl;
    },
    changeCate1() {
      this.axios.get('hetong/categorie/getListByPid',{params:{parentId: this.form.categoryId1}}).then(res=>{
        this.category2List = res.data.data;
        console.log(this.category1List);
      })
    },
    changeCate2() {
      this.axios.get('hetong/categorie/getListByPid',{params:{parentId: this.form.categoryId2}}).then(res=>{
        this.category3List = res.data.data;
        console.log(this.category1List);
      })
    },
    onSubmit() {
      console.log(this.form);
      this.form.category1 = null;
      this.form.category2 = null;
      this.axios.post('/hetong/save',this.form).then(res=>{
        console.log(res);
      })
    }
  },
  created() {
    // let query = this.$route.query;
    let params = this.$route.params;
    console.log("query:",params);
    if (params.id > 0) {
      console.log('通过Ajax请求查询回显数据');
    } else {
      console.log("通过Ajax请求查询页面初始化的数据");
    }
  },
  mounted() {
    this.axios.get('hetong/categorie/getListByPid',{params:{parentId: null}}).then(res=>{
      this.category1List = res.data.data;
      console.log(this.category1List);
    })

    this.axios.get('hetong/type/getListAll',{params:{parentId: null}}).then(res=>{
      this.typeList = res.data.data;
      console.log(this.category1List);
    })

    this.axios.get('hetong/getContractId',{params:{parentId: null}}).then(res=>{
      this.form.id = res.data.data;
      this.options.query.hetongId=res.data.data;
      console.log("res.data.data",res.data.msg)
      console.log(this.category1List);
    })

  }
}
</script>

<style scoped>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>